<template>
  <div class="viewContain">
    <el-row>
      <el-col :span="6">
        <el-card shadow="hover" :style="tree" class="tree">
          <el-tree
            ref="tree"
            v-loading="treeLoading"
            :props="defaultProps"
            :data="applyTreeDate"
            accordion
            highlight-current
            default-expand-all
            @current-change="CurrentNode"
          />
        </el-card>
      </el-col>
      <el-col :span="16" :offset="2">
        <el-form :model="listQuery" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="资源名称：" label-width="100px">
                <el-input v-model="listQuery.name" placeholder="请输入内容" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="20px">
                <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                <el-button size="mini" plain type="primary" @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0" align="right">
                <el-button size="mini" type="primary" @click="mainNode">主节点</el-button>
                <el-button size="mini" type="primary" @click="handleCreat">新增</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          ref="table"
          v-loading="loading"
          fit
          stripe
          :data="tableData"
          border
          size="mini"
          :height="height"
        >
          <el-table-column align="center" label="序号" type="index" width="50">
            <template slot-scope="scope">
              <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="id" align="center" label="资源ID" width="100" />
          <el-table-column prop="name" align="center" label="资源名称" width="200" />
          <el-table-column prop="url" align="center" label="资源URL" width="250" />
          <el-table-column prop="type" align="center" label="资源类型" width="130" />
          <el-table-column prop="status" align="center" label="状态" width="130" />
          <el-table-column align="center" fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button class="text-button" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button class="text-button el-button--danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" :total-count="totalCount" @pagination="getList" />
      </el-col>
    </el-row>
    <el-dialog :title="modalTitle" :visible.sync="showAddResourceInfo" :close-on-click-modal="false" width="800px">
      <el-form ref="addResourceForm" :model="addResourceForm" label-width="100px" size="small" :rules="addResourceFormRules">
        <el-form-item v-show="false" label="资源ID" style="width: 49%;display: inline-table">
          <el-input v-model="addResourceForm.id" :disabled="true" />
        </el-form-item>
        <el-form-item v-show="false" label="父级名称ID" style="width: 49%;display: inline-table">
          <el-input v-model="addResourceForm.pid" auto-complete="off" placeholder="根节点" />
        </el-form-item>
        <el-form-item label="父级名称" style="width: 49%;display: inline-table">
          <el-input v-model="addResourceForm.pName" auto-complete="off" placeholder="根节点" :disabled="true" />
        </el-form-item>
        <el-form-item label="资源名称" prop="name" style="width: 49%;display: inline-table">
          <el-input v-model="addResourceForm.name" auto-complete="off" placeholder="输入的需要增加资源名称" />
        </el-form-item>
        <el-form-item label="资源URL" prop="url" style="width: 49%;display: inline-table">
          <el-input v-model="addResourceForm.url" auto-complete="off" placeholder="eg:#(菜单)或/system/res/update(功能)" />
        </el-form-item>
        <el-form-item label="排序号" prop="seq" style="width: 49%;display: inline-table">
          <el-input-number v-model="addResourceForm.seq" controls-position="right" :min="1" :max="100" style="width:100%;" />
        </el-form-item>
        <el-form-item label="资源类型" prop="type" style="width: 49%;display: inline-table">
          <el-select v-model="addResourceForm.type" placeholder="请选择资源类型" style="width:100%;">
            <el-option
              v-for="item in typeRes"
              :key="item.code"
              :label="item.codeDesc"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="资源状态" prop="status" style="width: 49%;display: inline-table">
          <el-select v-model="addResourceForm.status" placeholder="请选择资源状态" style="width:100%;">
            <el-option
              v-for="item in statusRes"
              :key="item.code"
              :label="item.codeDesc"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="资源描述" style="width: 50%;display: inline-table">
          <el-input v-model="addResourceForm.des" type="textarea" auto-complete="off" />
        </el-form-item>
        <el-form-item v-if="addResourceForm.pid=='0'" label="资源图标" prop="iconcls" style="width: 49%;display: inline-table">
          <el-input v-model="addResourceForm.iconcls" :prefix-icon="addResourceForm.iconcls" type="text" auto-complete="off" />
          <el-card>预览图标：<i :class="addResourceForm.iconcls" /></el-card>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" plain size="small" @click.native="showAddResourceInfo = false">取消</el-button>
        <el-button type="primary" size="small" @click.native="addSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
</style>
<script>
import pagination from '@c/pagination'
import { commonMixin } from '@v/mixin/commonMixin.js'
import ComApiUrl from '@a/comomApi.js'
import { getResourceTree, insertResourceInfo, updateResourceById, getResourceListById } from '@a/core/apply.js'
import { getDataList } from '@a/core/dataDictionary.js'
export default {
  components: { pagination },
  mixins: [commonMixin],
  data() {
    return {
      comApiUrlList: new ComApiUrl('/core/api/resource/getPageResourceList'),
      comApiUrlDelete: new ComApiUrl('/core/api/resource/delResourceInfoById/'),
      height: window.innerHeight - 370,
      tree: {
        height: window.innerHeight - 200 + 'px'
      },
      treeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      applyTreeDate: [],
      loading: false,
      listQuery: {
        pid: '',
        name: '',
        pageNo: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableData: [],
      modalTitle: '新增资源',
      showAddResourceInfo: false,
      addResourceForm: {
        name: '',
        url: '',
        type: '',
        des: '',
        iconcls: '',
        status: '',
        seq: ''
      },
      addResourceFormRules: {
        name: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('资源名称不能为空'))
            } else {
              callback()
            }
          },
          trigger: 'change'
        },
        url: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('资源URL不能为空'));
            } else {
              callback();
            }
          },
          trigger: 'change'
        },
        type: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('请选择资源类型'));
            } else {
              callback();
            }
          },
          trigger: 'change'
        },
        des: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('资源描述不能为空'));
            } else {
              callback();
            }
          },
          trigger: 'change'
        },
        iconcls: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('图标不能为空'));
            } else {
              callback();
            }
          },
          trigger: 'change'
        },
        status: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('资源状态不能为空'));
            } else {
              callback();
            }
          },
          trigger: 'change'
        },
        seq: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('排序号不能为空'));
            } else {
              callback();
            }
          },
          trigger: 'change'
        }
      },
      typeRes: [],
      statusRes: [],
      isAdd: 0,
      pid: '',
      pName: ''
    }
  },
  created() {
    this.applyTreeInit();
    this.getList();
    // 打开新增窗体加载功能类型的下拉框
    this.getTypeRes('TYPE_SYSTEM_RES', '1');
    this.getTypeRes('TYPE_STATUS_RES', '2');
  },
  methods: {
    // 获取弹框下拉数据
    getTypeRes(val, type) {
      const para = {
        parentCode: val
      }
      getDataList(para).then(res => {
        if (res.data) {
          if (type === '1') {
            this.typeRes = res.data;
          } else {
            this.statusRes = res.data;
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询树形结构
    applyTreeInit() {
      this.treeLoading = true;
      getResourceTree().then(res => {
        this.treeLoading = false;
        if (res.data) {
          this.applyTreeDate = res.data;
        } else {
          this.$message({
            message: res,
            type: 'error'
          });
        }
      }).catch(err => {
        this.treeLoading = false;
        console.log(err)
      });
    },
    // 列表查询
    getList(page, pid) {
      if (pid) this.listQuery.pid = pid;
      this.getInfo()
    },
    // 点击树节点方法
    CurrentNode(value) {
      const id = value.id;
      this.pid = value.id;
      this.pName = value.label;
      // 获取列表内容
      this.getList('', id);
    },
    // 主节点
    mainNode() {
      this.listQuery = {
        pid: '0',
        name: '',
        pageNo: 1,
        pageSize: 10
      }
      this.getList()
    },
    // 查询
    handleSearch() {
      this.listQuery.pageNo = 1;
      this.listQuery.pageSize = 10;
      if (this.listQuery.name) this.listQuery.pid = '';
      this.getList()
    },
    // 重置
    reset() {
      this.listQuery = {
        pid: '',
        name: '',
        pageNo: 1,
        pageSize: 10
      }
      this.getList()
    },
    // 清空FORM表单
    resetForm(formName) {
      if (this.$refs[formName] === undefined) {
        return
      }
      this.$refs[formName].resetFields()
    },
    // 新增
    handleCreat() {
      // 界面重置
      this.resetForm('addResourceForm');
      this.addResourceForm = {
        pid: this.pid ? this.pid : '0',
        pName: this.pName ? this.pName : '根节点',
        name: '',
        seq: '',
        type: '',
        url: '',
        status: '',
        note: '',
        des: ''
      };
      this.modalTitle = '资源新增';
      this.showAddResourceInfo = true;
      this.isAdd = 1;
    },
    // 编辑
    handleEdit(row) {
      const id = row.id;
      getResourceListById(id).then(res => {
        if (res.data) {
          this.addResourceForm = res.data[0];
          this.modalTitle = '资源编辑';
          this.showAddResourceInfo = true;
          this.isAdd = 0;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 编辑+新增保存
    addSubmit() {
      this.$refs.addResourceForm.validate(validate => {
        if (validate) {
          if (this.isAdd === 1) {
            // 新增
            const para = Object.assign({}, this.addResourceForm)
            insertResourceInfo(para).then(res => {
              if (res.code === 0) {
                this.showAddResourceInfo = false;
                this.reset()
                this.applyTreeInit()
                this.$message({
                  message: '新增成功',
                  type: 'success'
                });
              } else if (res.code === -1) {
                this.$message({
                  message: res.msg,
                  type: 'warning'
                })
              }
            }).catch(err => {
              console.log(err)
            })
          } else if (this.isAdd === 0) {
            // 编辑
            const para = Object.assign({}, this.addResourceForm)
            updateResourceById(para).then(res => {
              if (res.code === 0) {
                this.showAddResourceInfo = false;
                this.reset()
                this.applyTreeInit()
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
              } else if (res.code === -1) {
                this.$message({
                  message: res.msg,
                  type: 'warning'
                })
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.delete(row.id).then(() => {
        this.applyTreeInit()
      })
    }
  }
}
</script>
